<!doctype html>
<html>

<head>
<meta charset="utf-8">
<link media="all" href="css/home.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/swipe.js"></script>
<title>乐道科技</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<meta content="" name="Keywords">
<meta content="" name="Description">
<!-- Mobile Devices Support @begin -->
<meta http-equiv="Content-Type" content="application/xhtml+xml;charset=UTF-8">
<meta http-equiv="Cache-Control" content="no-cache,must-revalidate">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="0">
<meta name="format-detection" content="telephone=no, address=no">
<meta content="yes" name="apple-mobile-web-app-capable"> <!-- apple devices fullscreen -->
<meta content="black-translucent" name="apple-mobile-web-app-status-bar-style">
<!-- Mobile Devices Support @end -->
<link href="favourite.ico" rel="shortcut icon">
<link rel="apple-touch-icon" href="icon.png" />
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<!--iPad 1 72x72 像素-->
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<!--iPhone 4 114x114 像素-->
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />

<style type='text/css'>
.tab{float:left;height:32px;font-size:16px!important;line-height:30px;padding:0 20px;margin-bottom:-14px;border-bottom:2px solid #fff;cursor:pointer}
.tab_cur{border-bottom:2px solid #3a5c9b;float:left;height:32px;}
table tr.top1 td {color:#f0842c !important}
table tr.gray td{color:#ccc !important}
.TimeDuce,.black{font-size:12px!important}
</style>

</head>
<body>
<div id="main">
	<header>
      <span class="smallwhite">标题</span>

		   <div class='TimeDuce' >
		     <span id="d">00天</span>:<span id="h">00时</span>:<span id="m">00分</span><span id="s" >00秒</span>
		  </div> 	  
    </header>

    <div class="border_content">
      <lable class="black">截止:2016/04/19</lable>|<lable class="red">18号</lable></br>
	  <lable class="green">185票</lable></br>
      <lable class="match_num">15名</lable>
	   <img src="images/logo.png" alt="" class="img_01" />
	</div>	
	<!-- 主体内容 begin-->
<div id="img_gallery_wrap">
	<div id="img_gallery">
		<img src="images/test.png" alt="" class="img_gallery" />
		<img src="images/test.png" alt="" class="img_gallery" />
		<img src="images/test.png" alt="" class="img_gallery" />
		<img src="images/test.png" alt="" class="img_gallery" />
		<img src="images/test.png" alt="" class="img_gallery" />		
	</div>
</div>

				   <nav>
				      <ul>
					     <li><a class='red'>围观评论</a></li>
						 <li><a>楼盘介绍</a></li>
						 <li><a>活动奖品</a></li>
						 <li><a>报名参赛</a></li>
					  </ul>
				   </nav>	
	
<div class="cell_full tab_content">
     <div class="cell_message">
	    <lable class="gray">2014/12/11</lable></br>
		<lable class="black"> 我就是我，颜色不一样的烟火！</lable>
	 </div>
     <div class="cell_message">
	    <lable class="gray">2014/12/11</lable></br>
		<lable class="black"> 我就是我，颜色不一样的烟火！</lable>
	 </div>
     <div class="cell_message">
	    <lable class="gray">2014/12/11</lable></br>
		<lable class="black"> 我就是我，颜色不一样的烟火！</lable>
	 </div>
     <div class="cell_message">
	    <lable class="gray">2014/12/11</lable></br>
		<lable class="black"> 我就是我，颜色不一样的烟火！</lable>
	 </div>	 
</div>	

<div class="cell_full tab_content" style='display:none'>
     <div class="cell_message">
	    <lable class="gray">2014/12/11</lable></br>
		<lable class="black"> 我就是我，颜色烟火！</lable>
	 </div>
     
</div>	

<div class="cell_full tab_content" style='display:none'>
     <div class="cell_message">
	    <lable class="gray">2014/12/11</lable></br>
		<lable class="black"> 我就是我，！</lable>
	 </div>
     
</div>		

<div class="cell_full tab_content" style='display:none'>
     <div class="cell_message">
	    <lable class="gray">2014/12/11</lable></br>
		<lable class="black"> 我就是我，颜色的烟火！</lable>
	 </div>
     
</div>	
	<!-- 主体内容 end-->	
	
	<!-- 尾部 begin-->	
	<footer>
	    <a  class='return'></a>
		<a  class='btn_icon_vote'></a>		
		<a  class='btn_icon_vote_by'></a>
	    <a  class='message'></a>
	</footer>
	<!-- 尾部 end-->
<style type='text/css'>
.frame {z-index:998;display:none}
#dialog {z-index:999;display:none}
#dialog_title {color:#fff;line-height:30px;padding-left:13px;font-size:14px;}
#dialog p{padding:10px;}
a.btn_icon_personal{cursor:pointer;margin-right:10%;}
a.btn_icon_team{cursor:pointer;margin-right:10%;}
</style>
	
	<div class='frame' style='z-index:998' ></div>	 <!-- 遮罩-->	

	<div id='dialog' style='z-index:999' >
		<div class='dialog_top'><a class='close'>关闭图册</a></div>
		<div class='dialog_content'>
			<div class="slide">
				<div class="box_swipe" id="banner_box">
					<ul>
						<li><a><img src="images/test_big.png"></a><span>安吉丽娜</span></li>
						<li><a><img src="images/test_big.png"></a></li>
						<li><a><img src="images/test_big.png"></a></li>
						<li><a><img src="images/test_big.png"></a></li>
						<li><a><img src="images/test_big.png"></a></li>						
					</ul>
					<ol>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>						
					</ol>
					<div id='slide_page'><span class='slide_page_cur'></span>/<span class='slide_page_total'></span></div>
				</div>
				
			</div>
		</div>
	</div>		
</div>
<script type="text/javascript">


$(function(){
    $('#img_gallery').width($('.img_gallery').length*190)//初始化长度
	$('.slide_page_cur').html('1');
	$('.slide_page_total').html($('.img_gallery').length);
	
	
	$('.img_gallery').click(function(){
	
	     var index = $(this).index();
		 $('.slide_page_cur').html(index+1);
	     $('.frame').width(parseInt($(window).width())).height(parseInt($(window).height()))
	     $('.frame,#dialog').fadeIn();		
         $('ol li').eq(index).addClass('on');
		 var slide = new Swipe(document.getElementById('banner_box'), {
				speed:500,
				auto:false,
				callback: function(){
					$('.slide_page_cur').html(this.index+1);
				}
			});	
		slide.slide(index,0)
        
	});
	
    LeDao.TimeDuce('2016/04/19 00:00:00');
	
	$('nav ul li').click(function(){
	  var index = $(this).index();
	  $('.tab_content').css('display','none');
	  $('.tab_content').eq(index).css('display','');
	  $('nav li a').removeClass('red');
	  $(this).children('a').addClass('red');
	});

	 

	
     $('.frame').width(parseInt($(window).width())).height(parseInt($(window).height()));
	 
	 $('#dialog a.close,#dialog a.cancel').click(function(){
	   	 $('.frame,#dialog').fadeOut();
	 })
	 
	 $('.btn_icon_personal').click(function(){
	     $('.frame').width(parseInt($(window).width())).height(parseInt($(window).height()))
	     $('.frame,#dialog').fadeIn();
	 })
	 
     $(window).resize(function(){
	   if($('.frame').css('display') !='none'){
	    $('.frame').width(parseInt($(window).width())).height(parseInt($(window).height()))
	   }
	 });
	 	
	
});

</script>

</body>
</html>